<template>
  <div class="classify-table">
    <el-row class="title">
      <el-col :span="14">标题</el-col>
      <el-col :span="2">回答数</el-col>
      <el-col :span="8">时间</el-col>
    </el-row>
    <el-row
      v-for="data in list"
      :key="data.id"
    >
      <el-col :span="14">
        <span class="question">{{data.title}}</span>
      </el-col>
      <el-col :span="2">{{data.answer}}</el-col>
      <el-col :span="8">{{data.time}}</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ClassifyTable',
  props: {
    list: {
      type: Array,
      default() {
        return [
          {
            id: 0, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 1, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 2, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 3, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 4, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 5, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 6, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 7, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          }
        ];
      }
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .classify-table {
    padding: 0 10px;
    min-height: 730px;
    border: 1px solid #ddd;
    border-top: 0;
    background-color: #fff;
    .el-row {
      height: 40px;
      line-height: 40px;
      color: #666;
      &.title {
        color: #333;
      }
      .el-col {
        text-align: center;
        &:first-child {
          text-align: left;
        }
        .question:hover {
          color: @mainBgColor;
          cursor: pointer;
        }
      }
    }
  }
</style>
